<template>
  <div class="detail">
    <div class="img">
      <img :src="filmdetail.poster" alt="" />
    </div>
    <div class="neirong">
      <div class="one">
        <span class="oneone">{{ filmdetail.name }} </span>
        <span class="onethr"
          ><i>{{ filmdetail.grade }}</i
          >分</span
        >
      </div>
      <div class="category">{{ filmdetail.category }}</div>
      <div class="premiereAt">{{ filmdetail.premiereAt | timeright }}上映</div>
      <div class="nation">
        {{ filmdetail.nation }} | {{ filmdetail.runtime }}分钟
      </div>
      <div :class="'synopsis'" v-bind:style="[a4]">
        {{ filmdetail.synopsis }}
      </div>
      <div class="toggle">
        <img :src="down" alt="" @click="fn1" />
      </div>
    </div>
      <!-- 这里写swiper  -->
     <div class="swiper">
        <swiper :key="'actors' + actors.length"> 
             <div 
             class="swiper-slide" 
             v-for="(item,index) in actors" 
             :key="index">
                <div>
                   <img v-lazy="item.avatarAddress" alt="">
                </div>
             </div>
        </swiper>
     </div>

    <div class="ticket">购票</div>
    <div @click="back" class="back">
      <i class="iconfont icon-fanhui1"></i>
    </div>
  </div>
</template>
<script>
import swiper from '@/components/swiper'
import { movieDetailData } from "@/api/api";
import moment from "moment";
export default {
  props: [],
  components: {swiper},
  data() {
    return {
      filmdetail: {},
      actors:[],
      a4: {
        height: "36px",
      },
      down: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e69c7e0-80bd-42c9-9318-a254e609df99/3aef3682-3d8c-4eb3-a3f0-0ae5d816108b.png",
      flag: true,
    };
  },

  methods: {
    back() {
      console.log("进入back里面了");
      this.$router.go(-1);
    },
    fn1() {
      if (this.flag) {
        this.a4.height = "";
        this.down =
          "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e69c7e0-80bd-42c9-9318-a254e609df99/7d26b258-3618-4b28-9fe8-02d4bf06e1a6.jpg";
        this.flag = !this.flag;
      } else {
        this.a4.height = "36px";
        this.down =
          "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e69c7e0-80bd-42c9-9318-a254e609df99/3aef3682-3d8c-4eb3-a3f0-0ae5d816108b.png";
        this.flag = !this.flag;
      }
    },
  },

  computed: {},

  watch: {},

  filters: {
    timeright: function (value) {
      console.log("时间戳过滤");
      //  Y year  M month  D  day
      return moment(value * 1000).format("YYYY-MM-DD");
    },
  },

  beforeCreate() {},

  created() {
    console.log("detail created");
    console.log(this.$route);
    movieDetailData(this.$route.params.filmid).then((res) => {
      console.log("电影详情数据res", res);
      this.filmdetail = res.data.data.film;
      this.actors = res.data.data.film.actors
    });
  },

  beforeMount() {},

  mounted() {
    this.eventbus.$emit("footnav", false);
  },

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {
    this.eventbus.$emit("footnav", true);
  },
};
</script>
<style  lang='scss' scoped>
.detail {
  .swiper-slide {
    img {
      width: 80px;
    }
  }
  .img {
    width: 100%;
    height: 260px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.ticket {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: orangered;
  color: whitesmoke;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
}
.back i {
  color: rgb(97, 96, 96);
}
.back {
  position: fixed;
  top: 5px;
  left: 5px;
  background: rgba(219, 218, 218, 0.5);
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
}
.icon-fanhui1 {
  color: orangered;
}
.neirong {
  width: 100%;
  padding: 12px 15px 15px;
  box-sizing: border-box;
}
.one {
  height: 27px;
}
.oneone {
  font-size: 18px;
  color: #191a1b;
  font-size: 18px;
  height: 27px;
  line-height: 27px;
  margin-right: 7px;
}
.onetwo {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
  display: inline-block;
}
.onethr {
  position: absolute;
  right: 20px;
}
.onethr {
  font-size: 10px;
  color: #ffb232;
}
.onethr i {
  color: #ffb232;
  font-size: 20px;
}
.category {
  margin-top: 4px;
  height: 19px;
  font-size: 13px;
  line-height: 19px;
  color: #797d82;
}
.premiereAt {
  margin-top: 4px;
  height: 19px;
  font-size: 13px;
  line-height: 19px;
  color: #797d82;
}
.nation {
  margin-top: 4px;
  height: 19px;
  font-size: 13px;
  line-height: 19px;
  color: #797d82;
}
.synopsis {
  margin-top: 12px;
  overflow: hidden;
  // height: 36px!important;
  font-size: 13px;
  color: #797d82;
}
.film .film-detail .toggle {
  text-align: center;
  display: block;
  height: auto;
  width: 20px;
  margin: auto;
  line-height: normal;
}
.toggle img {
  width: 12px;
  margin-left: 160px;
}
</style>